// utils/useResize.ts
import type { App } from "vue";

interface IuseResize {
  (el: HTMLElement, cb: (a: any, b: any, c: any) => void): void;
  install: (app: App, name: string) => void;
};

const useResize: IuseResize = (e: HTMLElement, callback: (a: any, b: any, c: any) => void) => {
  // e.style.drag = 'both'
  const resize = new ResizeObserver((entries) => {
    entries.forEach((entry) => {
      callback(entry, resize, e);
    });
  });
  resize.observe(e);
};

const install = (app: App, directiveName = "resize") => {
  app.directive(directiveName, {
    mounted(el, binding) {
      useResize(el, binding.value);
    },
  });
};

useResize.install = install;

export { useResize };
export default useResize;
